<template>
    <div class="xd_reconciliation_export_form_container">
        <el-form ref="xdReconciliationExportForm" :rules="rules" :model="formData" label-width="90px"
                 v-enterToNext>
            <el-form-item label="公司名称" prop="company_name">
                <el-input v-model="formData.company_name" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="银行账号" prop="bank_account">
                <el-input v-model="formData.bank_account" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="开户行" prop="bank">
                <el-input v-model="formData.bank" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="联系人" prop="linker_name">
                <el-input v-model="formData.linker_name" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="联系电话" prop="linker_phone">
                <el-input v-model="formData.linker_phone" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="通讯地址" prop="linker_address">
                <el-input v-model="formData.linker_address" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="日期" prop="the_date">
                <el-date-picker v-model="formData.the_date" type="date"
                                value-format="yyyy-MM-dd" style="width: 100%;" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "ReconciliationExportForm",
    data() {
        const _this = this;
        return {
            rules: {
                company_name: [
                    { required: true, message: "请输入公司名称", trigger: "change" },
                ],
                bank_account: [
                    { required: true, message: "请输入银行账号", trigger: "change" },
                ],
                bank: [
                    { required: true, message: "请输入开户行", trigger: "change" },
                ],
                linker_name: [
                    { required: true, message: "请输入联系人", trigger: "change" },
                ],
                linker_phone: [
                    { required: true, message: "请输入联系电话", trigger: "change" },
                ],
                linker_address: [
                    { required: true, message: "请输入通讯地址", trigger: "change" },
                ],
                the_date: [
                    { required: true, message: "请选择日期", trigger: "change" },
                ],
            },
            formData: {},
            settingData: {},
        };
    },
    computed: {
        ...mapState(['userInfo', 'user_setting']),
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let _this = this;
            _this.settingData = _this.user_setting || {};
            _this.formData = $.extend({}, (_this.settingData.json_object || {}), {
                the_date: _this.$XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),
            });
        },
        async confirm () {
            const _this = this;
            let valid = await _this.validateForm('xdReconciliationExportForm');
            if (!valid) {
                return false;
            }
            let subData = $.extend({}, _this.settingData, {
                code: _this.userInfo.sid,
                json: $.extend({}, _this.formData),
            });
            delete subData.json_object;
            return _this.fetchData(_this.$api.API_SaveSysSetting, subData).then(() => {
                _this.storeDispatch('initUserSetting', subData.code);
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.xd_reconciliation_export_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>